<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css">
    <title>easyblog</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    
    body {
        background-image: url("imgs/bj1.jpg");
        background-size: cover;
    }
    
    .botton-box {
        margin: 0 auto;
        margin-top: 20px;
        width: 700px;
    }
    
    .btn-list {
        width: 150px;
        height: 70px;
        margin-right: 29px;
    }
    
    .btn-list:hover,
    .btn-list:active {
        background-color: #FFFAFA;
    }
    
    .btn-list:last-child {
        margin-right: 0;
    }
    
    h2 {
        text-align: center;
        color: white;
    }
    
    .con {
        margin: 0 auto;
        margin-top: 30px;
        width: 600px;
    }
    
    .c1 i.fa-camera {
        text-align: center;
        width: 600px;
        font-size: 100px;
        color: white;
    }
    
    .c1-word {
        padding: 40px;
        padding-top: 30px;
        background-color: rgba(255, 255, 255, 0.8);
        line-height: 25px;
    }
    
    .c2-word {
        background-color: rgba(255, 255, 255, 0.8);
        float: left;
        width: 300px;
        padding: 40px;
        line-height: 25px;
    }
    
    .c2::before,
    .c2::after {
        content: "";
        display: block;
        clear: both;
    }
    
    .con-c3 {
        width: 1000px;
        margin: 0 auto;
        margin-top: 30px;
    }
    
    .con-c4 {
        margin-top: 50px;
        margin: 0 auto;
        width: 1000px;
        position: relative;
    }
    
    .btn_box {
        height: 300px;
        position: relative;
    }
    
    .cname {
        position: absolute;
        top: 10px;
        left: 75px;
        width: 350px;
    }
    
    .cemail {
        position: absolute;
        top: 60px;
        left: 75px;
        width: 350px;
    }
    
    .csubject {
        position: absolute;
        top: 110px;
        left: 75px;
        width: 350px;
    }
    
    .cinformation {
        position: absolute;
        top: 10px;
        right: 75px;
        width: 400px;
        height: 111px
    }
    
    .btn_box button {
        position: absolute;
        top: 133px;
        right: 388px;
        width: 100px;
        height: 40px;
        background-color: #6C3365;
        border-color: #6C3365;
        color: white;
    }
    
    .c4-word {
        color: white;
        width: 600px;
        margin: 0 auto;
        margin-top: 100px;
    }
    
    .c4-word h3 {
        text-align: center;
    }
    
    .c4-word .c1 {
        display: block;
    }
    
    .c2 {
        display: none;
    }
    
    .c3 {
        display: none;
    }
    
    .c4 {
        display: none;
    }
</style>

<body>
    <div class="botton-box">
        <button type="button" class="btn btn-list bta">主页</button>
        <button type="button" class="btn btn-list btb">关于</button>
        <button type="button" class="btn btn-list btc">相册</button>
        <button type="button" class="btn btn-list btd">关于</button>
    </div>
    <div class="con c1">
        <i class="fa fa-camera"></i>
        <h2>主页</h2>
        <div class="c1-word">點子例趣，爾這情爸斯王不苦西：士土下大的政縣車險如太社表所來體？日地制美流都？那我和年流的，設下難把原件備、起了岸比年之我色望已身子，體業分得後信定部以因吃出但外球格體的王力物部工主白男那見？檢完部，都可亞式以團原，可辦信。現入的山？呢盡紅！家個我的當阿人生喜石上別間生發童不：安響單，天太只，皮照你供要說難又成最，一再她提機上子光氣區過家，發說況史感是答國你一身……平園戲金然下：經如理，點時成。</div>
        <div class="c1-word">點子例趣，爾這情爸斯王不苦西：士土下大的政縣車險如太社表所來體？日地制美流都？那我和年流的，設下難把原件備、起了岸比年之我色望已身子，體業分得後信定部以因吃出但外球格體的王力物部工主白男那見？檢完部，都可亞式以團原，可辦信。現入的山？呢盡紅！家個我的當阿人生喜石上別間生發童不：安響單，天太只，皮照你供要說難又成最，一再她提機上子光氣區過家，發說況史感是答國你一身……平園戲金然下：經如理，點時成。</div>
    </div>
    <div class="con c2">
        <div class="c2-word">
            <h3>题目</h3> 點子例趣，爾這情爸斯王不苦西：士土下大的政縣車險如太社表所來體？日地制美流都？那我和年流的，設下難把原件備、起了岸比年之我色望已身子，體業分得後信定部以因吃出但外球格體的王力物部工主白男那見？檢完部，都可亞式以團原，可辦信。現入的山？呢盡紅！家個我的當阿人生喜石上別間生發童不</div>
        <div class="c2-word">
            <h3>题目</h3> 點子例趣，爾這情爸斯王不苦西：士土下大的政縣車險如太社表所來體？日地制美流都？那我和年流的，設下難把原件備、起了岸比年之我色望已身子，體業分得後信定部以因吃出但外球格體的王力物部工主白男那見？檢完部，都可亞式以團原，可辦信。現入的山？呢盡紅！家個我的當阿人生喜石上別間生發童不</div>
    </div>
    <div class="con-c3 c3">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="thumbnail">
                        <!-- 响应式的一张图片  -->
                        <img src="imgs/bj1.jpg" alt="...">

                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img src="imgs/bj2.jpg" alt="...">

                    </div>
                </div>
                <div class="col-sm-6 col-md-3">
                    <div class="thumbnail">
                        <img src="imgs/bj3.jpg" alt="...">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="con-c4 c4">

        <div class="c4-word">
            <h3>Contact Us</h3>
            日地制美流都？那我和年流的，設下難把原件備、起了岸比年之我色望已身子，體業分得後信定部以因吃出但外球格體的王力物部工主白男那見？檢完部，
        </div>
        <div class="btn_box">
            <div class="form-group">
                <input type="text" class="form-control cname" placeholder="Inactive" value="name">
            </div>
            <div class="form-group">
                <input type="text" class="form-control cemail" placeholder="Inactive" value="Email">
            </div>
            <div class="form-group">
                <input type="text" class="form-control csubject" placeholder="Inactive" value="Subject">
            </div>
            <div class="form-group">
                <input type="text" class="form-control cinformation" placeholder="Inactive" value="信息">
            </div>
            <button>提交</button>
        </div>
    </div>

</body>
<script>
    $(function() {
        $(".bta").on("click", function(e) {
            $(".c1").css("display", "block");
            $(".c2").css("display", "none");
            $(".c3").css("display", "none");
            $(".c4").css("display", "none");
            $("body").css("background-image", 'url("imgs/bj1.jpg")');
        })
        $(".btb").on("click", function(e) {
            $(".c1").css("display", "none");
            $(".c2").css("display", "block");
            $(".c3").css("display", "none");
            $(".c4").css("display", "none");
            $("body").css("background-image", 'url("imgs/bj2.jpg")');
        })
        $(".btc").on("click", function(e) {
            $(".c1").css("display", "none");
            $(".c2").css("display", "none");
            $(".c3").css("display", "block");
            $(".c4").css("display", "none");
            $("body").css("background-image", 'url("imgs/bj3.jpg")');
        })
        $(".btd").on("click", function(e) {
            $(".c1").css("display", "none");
            $(".c2").css("display", "none");
            $(".c3").css("display", "none");
            $(".c4").css("display", "block");
            $("body").css("background-image", "none");
            $("body").css("background-color", "#003E3E");
        })
    })
</script>

</html>